<script setup>
import { useSetting } from '@/stores/setting'
import PageSet from './comps/PageSet.vue';
import NoteSet from './comps/NoteSet.vue'
const activeNames = ref([1, 2, 3, 4])

const setting = useSetting()
console.log(setting.$state)
const onUpdate = () => {
  setting.setSetting(data => {
    console.log(data)
    myMsgS("设置更新成功")
    location.reload()
  })
}
</script>

<template>
  <div class="model">
    <!-- {{ setting.noteSetting }} -->
    <el-collapse v-model="activeNames" v-if="setting.isOK">
      <el-collapse-item title="页面设置" :name="1">
        <PageSet :pageSetting="setting.pageSetting" />
      </el-collapse-item>
      <el-collapse-item title="记录设置" :name="2">
        <NoteSet :noteSetting="setting.noteSetting" />
      </el-collapse-item>
      <el-collapse-item title="关系设置" :name="3">
        关系设置
      </el-collapse-item>
    </el-collapse>

    <el-button type="primary" @click="onUpdate" style="float: right;margin-top: 10px;">保存并刷新</el-button>

  </div>
</template>

<style scoped>
::v-deep(.el-collapse),
::v-deep(.el-collapse>*>*),
::v-deep(.el-collapse>*>*>*) {
  background-color: transparent;
}
</style>